<template>
  <div class="x-card">
    <div class="x-card-search" v-if="!props.hideSearch">
      <slot name="search"></slot>
    </div>
    <div class="x-card-title">
      <slot name="title"></slot>
    </div>
    <div class="x-card-main">
      <slot name="main"></slot>
    </div>
    <slot></slot>
  </div>
</template>

<script lang="ts" setup>
const props = withDefaults(
  defineProps<{
    hideSearch?: boolean
  }>(),
  {
    hideSearch: false
  }
)
</script>

<style lang="scss">
$border: 1px solid var(--ep-border-color);

.x-card {
  box-sizing: border-box;
  border: $border;
  height: 100%;
  display: flex;
  flex-direction: column;

  .x-card-title {
    height: 55px;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: $border;
    flex-shrink: 0;
  }

  .x-card-search {
    padding: 6px 20px;
    border-bottom: $border;
  }

  .x-card-main {
    padding: 10px;
    overflow: hidden;
    height: 100%;
  }
}
</style>
